<template>
  <div class="live_jinbi_box">
    <div class="item1">
      <!-- <div class="kodai">
            <img src="@/assets/liu/zsjx.png" class="full" />
            <img src="@/assets/liu/zsjx.png" class="emptyBox" />
        </div> -->
      <div class="clipped-box">
        <i class="clipped jinbi1"></i>
        <i class="clipped jinbi2"></i>
        <i class="clipped jinbi3"></i>
        <i class="clipped jinbi1"></i>
        <i class="clipped jinbi2"></i>
        <i class="clipped jinbi3"></i>
      </div>
    </div>
    <p id="html"></p>
  </div>
</template>

<script>
import "@/common/jquery-1.8.2.min.js";
export default {
  name: "jinbi",
  props: ["isRuningAni"],
  data() {
    return {
      aniTimer: null
    };
  },
  created() {},
  mounted() {
    this.aniGo();
    this.aniTimer = setInterval(() => {
      if (document.visibilityState != "hidden") {
        this.aniGo();
      }
    }, 7000);
  },
  beforeDestroy() {
    clearInterval(this.aniTimer);
    this.aniTimer = null;
  },
  watch: {
    isRuningAni(a) {}
  },
  methods: {
    aniGo() {
      function rand(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }
      var first = false,
        clicked = false;
      if (clicked === false) {
        // $('.full').css({
        //     'display': 'none'
        // });
        // $('.emptyBox').css({
        //     'display': 'block'
        // });
        clicked = true;

        let cBox = document.querySelector(".clipped-box");
        cBox.style.display = "block";
        // $('.item1 .clipped-box').css({
        //     'display': 'block'
        // });
        // Apply to each clipped-box div.
        $(".clipped").each(function() {
          var v = rand(90, 50), //控制高度
            angle = rand(95, 97),
            theta = (96 * Math.PI) / 180,
            g = -9.8;

          // $(this) as self
          var self = $(this);
          var t = 0,
            z,
            r,
            nx,
            ny,
            totalt = 10;
          var negate = [1, -1, 0],
            direction = negate[Math.floor(Math.random() * negate.length)];

          // var randDeg = rand(-5, 10),
          //     randScale = rand(0.9, 1.1),
          //     randDeg2 = rand(30, 5);

          // // And apply those
          // $(this).css({
          //     'transform': 'scale(' + randScale + ') skew(' + randDeg + 'deg) rotateZ(' + randDeg2 + 'deg)'
          // });

          // Set an interval
          z = setInterval(function() {
            $(self).show();
            var ux = Math.cos(theta) * v * direction;
            var uy = Math.sin(theta) * v - -g * t;
            nx = ux * t;
            ny = uy * t + 0.25 * g * Math.pow(t, 2);
            if (ny < -20) {
              //限制下降距离
              ny = -20;
              $(self).hide();
            }
            //$("#html").html("g:" + g + "bottom:" + ny + "left:" + nx + "direction:" + direction);
            $(self).css({
              bottom: ny + "px",
              left: nx + "px"
            });
            // Increase the time by 0.10
            t = t + 0.1;

            //跳出循环
            if (t > totalt) {
              $(self).hide();
              clicked = false;
              first = true;
              clearInterval(z);
            }
          }, 15);
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.live_jinbi_box {
  position: absolute;
  top: 17%;
  left: 50%;
  // z-index: 9;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
}
.clipped-box {
  i {
    position: absolute;
    left: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    &.jinbi1 {
      background-image: url("./../assets/meng/jinbi_1.png");
      animation: jAni linear 800ms infinite;
    }
    &.jinbi2 {
      background-image: url("./../assets/meng/jinbi_2.png");
      animation: jAni linear 1000ms infinite;
    }
    &.jinbi3 {
      background-image: url("./../assets/meng/jinbi_3.png");
      animation: jAni linear 1200ms infinite;
    }
    @keyframes jAni {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotateY(360deg);
      }
    }
  }
}
.kodai {
  position: absolute;
  left: 100px;
  top: 100px;
}
</style>
